<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
    current: number
    pageSize: number
    total: number
    pageSizes?: Array<number>
    layout?: string
    isCardLayout?: boolean
    defaultPageSize?: number
    showLessItems?: boolean
    size?: 'small' | 'default' | 'large'
    disabled?: boolean
    background?: boolean
  }>(),
  {
    background: true,
    size: 'default',
    pageSizes: () => [10, 20, 50, 100],
    layout: 'total, prev, pager, next, sizes, jumper'
  }
)

const emit = defineEmits(['update:current', 'update:pageSize', 'change'])

const currentPage = computed({
  get() {
    return props.current
  },
  set(value) {
    emit('update:current', value)
    emit('change')
  }
})

const pageLimit = computed({
  get() {
    return props.pageSize
  },
  set(value) {
    emit('update:pageSize', value)
  }
})

// 处理每页显示数量变化
const handleSizeChange = (newPageSize: number) => {
  pageLimit.value = newPageSize
  currentPage.value = 1 // 当每页显示数量变化时，重置当前页码为1
}
</script>

<template>
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageLimit"
    :page-sizes="pageSizes"
    :size="size"
    :disabled="disabled"
    :background="background"
    :layout="layout"
    :total="total"
    @size-change="handleSizeChange"
  />
</template>

<style lang="scss" scoped>
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin: 16px 0;

  .el-pagination__sizes .el-select {
    width: 100px;
  }
}
</style>
